<template>
  <div class="song">
    <van-overlay :show="show">
      <div class="main">
        <div class="header">
          <div class="icon" @click.stop="isShow">
            <van-icon name="arrow-left" color="white" size="20" />
          </div>
          <div
            :style="{
              background: `url(${obj.picUrl}) no-repeat center center/100% 100%`,
            }"
            class="back"
            @click="isPlay"
            :class="{ active: !status }"
          ></div>
        </div>
        <div class="lyric">
          <ul :style="{ transform: `translateY(-${currentIndex * 50}px)` }">
            <li
              v-for="(item, index) in lyric"
              :key="index"
              :class="{ active: currentIndex == index }"
            >
              {{ item.lyricText }}
            </li>
          </ul>
        </div>
      </div>
      <div class="progress">
        <div class="ctime">
          <span>{{ currentTime | filterone }}</span>
        </div>
        <div class="line" ref="line" @click="check">
          <div
            class="cline"
            :style="{
              width: `${(currentTime / duration) * w}px`,
            }"
          ></div>
        </div>
        <div class="total">
          <span>{{ duration | filterone }}</span>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { lyric } from "@/api/home/home";
export default {
  props: {
    obj: {
      type: Object,
      default: () => {},
    },
    currentTime: {
      type: Number,
      default: () => {},
    },
    duration: {
      type: Number,
      default: () => {},
    },
    show: {
      type: Boolean,
      default: () => {},
    },
  },
  data() {
    return {
      status: true,
      w: 0, //进度条长度
      lyric: [],
    };
  },
  computed: {
    // 当前播放歌词索引值
    currentIndex() {
      let index = 0;
      for (var i = 0; i < this.lyric.length; i++) {
        if (i >= this.lyric.length - 1) {
          index = i;
          break;
        }
        if (
          this.lyric[i].time < this.currentTime &&
          this.lyric[i + 1].time > this.currentTime
        ) {
          index = i;
          break;
        }
      }
      return index;
    },
  },
  filters: {
    filterone(val) {
      var h = parseInt(val / 3600);
      h = h < 10 ? "0" + h : h;
      var m = parseInt((val / 60) % 60);
      m = m < 10 ? "0" + m : m;
      var s = parseInt(val % 60);
      s = s < 10 ? "0" + s : s;
      return h + ":" + m + ":" + s;
    },
  },
  mounted() {
    this.w = this.$refs.line.offsetWidth;
    lyric({ id: this.obj.id }).then((res) => {
      if (res.status == 200) {
        let lyric = res.data.lrc.lyric || "";
        this.parseLyric(lyric);
      }
    });
  },
  methods: {
    isShow() {
      this.$emit("noshow");
    },
    // 解析歌词
    parseLyric(lyric) {
      let arr = lyric.split("\n");
      arr.pop();
      let reg = /\[(\d+):(\d+\.\d+)\](.*)/;
      let newArray = [];
      for (let i = 0; i < arr.length; i++) {
        let regEx = new RegExp(reg);
        if (regEx.test(arr[i])) {
          let obj = {
            time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
            lyricText: RegExp.$3,
          };
          newArray.push(obj);
        }
      }
      this.lyric = newArray;
    },
    // 改变进度
    check(e) {
      console.log(e.pageX, this.$refs.line.offsetLeft);
      let w = e.pageX - this.$refs.line.offsetLeft;
      let currentTime = (w / this.$refs.line.offsetWidth) * this.duration;
      this.$emit("checkTime", currentTime);
    },
    // 切换暂停播放
    isPlay() {
      this.status = !this.status;
      this.$emit("toggleStatus", this.status);
    },
  },
  watch: {
    currentTime: {
      handler(newVal) {
        if (newVal == this.duration) {
          this.status = false;
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.song {
  .icon {
    position: absolute;
    top: 10px;
    left: 10px;
  }
}
.main {
  color: white;
  text-align: center;
  .header {
    position: relative;
    height: 320px;
    .back {
      width: 180px;
      height: 180px;
      border: 50px solid black;
      border-radius: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -140px;
      margin-left: -140px;
      animation: zhuan 5s linear infinite;
    }
    .active {
      animation-play-state: paused;
    }
  }
  .lyric {
    height: 300px;
    overflow: hidden;
    li {
      height: 50px;
      font-size: 14px;
    }
    li.active {
      color: pink;
      font-size: 16px;
    }
  }
}
.progress {
  display: flex;
  padding: 0 15px;
  align-items: center;
  font-size: 14px;
  color: white;
  .line {
    flex: 1;
    border-radius: 5px;
    margin: 0 10px;
    height: 3px;
    background: white;
  }
  .cline {
    height: 3px;
    background: pink;
  }
}
@keyframes zhuan {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

